<template>
  <div class="aug-new-page">
    <!-- 左侧深蓝色侧边栏 -->
    <SimpleBigLeft 
      :navigation="navigationItems"
      :active-item="activeNavItem"
      @navigate="handleNavigate"
    />
    
    <!-- 右侧内容区 -->
    <div class="right-content">
      <!-- 标题栏 -->
      <SimpleTitleBar
        :chat-title="currentChatTitle"
        :client-name="currentClientName"
        :online-status="currentClientOnline"
        :actions="titleBarActions"
      />
      
      <!-- 右下区域 -->
      <SimpleRightBottom
        :tabs-props="tabsProps"
        :chat-mid-props="chatMidProps"
        :client-info-props="clientInfoProps"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import SimpleBigLeft from '@/components/chat/SimpleBigLeft.vue'
import SimpleTitleBar from '@/components/chat/SimpleTitleBar.vue'
import SimpleRightBottom from '@/components/chat/SimpleRightBottom.vue'

// 导航数据
const activeNavItem = ref('chats')
const navigationItems = ref([
  { id: 'chats', label: '聊天', icon: 'chat' },
  { id: 'contacts', label: '联系人', icon: 'contacts' },
  { id: 'settings', label: '设置', icon: 'settings' }
])

// 当前聊天数据
const currentChatTitle = ref('j****')
const currentClientName = ref('j****')
const currentClientOnline = ref(true)

// 标题栏操作按钮
const titleBarActions = ref([
  { id: 'ai-service', label: 'AI 客服', icon: 'info', onClick: () => console.log('AI 客服') },
  { id: 'quality-check', label: '智能质检', icon: 'search', onClick: () => console.log('智能质检') },
  { id: 'quick-check', label: '快速质检', icon: 'more', onClick: () => console.log('快速质检') }
])

// 聊天列表数据
const chatList = ref([
  {
    id: '1',
    name: 'j****',
    avatar: '/default-avatar.png',
    lastMessage: '有要的马电视水冷器吗？',
    timestamp: new Date('2025-05-23 09:06:30'),
    unreadCount: 1,
    status: 'online'
  },
  {
    id: '2',
    name: 'j****',
    avatar: '/default-avatar.png',
    lastMessage: '需要卡片',
    timestamp: new Date('2025-05-23 08:30:00'),
    unreadCount: 0,
    status: 'away'
  },
  {
    id: '3',
    name: 'j****',
    avatar: '/default-avatar.png',
    lastMessage: '需要卡片',
    timestamp: new Date('2025-05-23 08:00:00'),
    unreadCount: 0,
    status: 'offline'
  }
])

// 消息数据
const messages = ref([
  {
    id: '1',
    senderId: '1',
    senderName: 'j****',
    content: '有要的马电视水冷器吗？',
    timestamp: new Date('2025-05-23 09:06:30'),
    type: 'text',
    isOwn: false
  },
  {
    id: '2',
    senderId: '1',
    senderName: 'j****',
    content: '【链接免费送】美的一级能效节能电热水器精选\n用电热水器洗澡CA35\nhttps://detail.tmall.com/item.htm?sp...',
    timestamp: new Date('2025-05-23 09:06:30'),
    type: 'link',
    isOwn: false
  }
])

// 客户信息数据
const clientInfo = ref({
  id: '1',
  name: 'j****',
  avatar: '/default-avatar.png',
  phone: '',
  email: '',
  company: '',
  position: '',
  location: '',
  tags: [
    { id: '1', name: '在线100%', color: '#52c41a' },
    { id: '2', name: '普通客户', color: '#faad14' },
    { id: '3', name: '新客', color: '#1890ff' }
  ],
  notes: '',
  preferences: {
    preferredLanguage: '中文',
    communicationChannel: 'chat',
    availableHours: { start: '09:00', end: '18:00' }
  },
  history: [],
  createdAt: new Date('2015-11-12'),
  lastContactAt: new Date('2025-05-23 09:06:30'),
  updatedAt: new Date('2025-05-23 09:06:30')
})

// 组件Props
const tabsProps = computed(() => ({
  chatList: chatList.value,
  activeChat: '1',
  loading: false
}))

const chatMidProps = computed(() => ({
  messages: messages.value,
  loading: false
}))

const clientInfoProps = computed(() => ({
  client: clientInfo.value
}))

// 事件处理
const handleNavigate = (itemId) => {
  activeNavItem.value = itemId
  console.log('Navigate to:', itemId)
}
</script>

<style scoped>
.aug-new-page {
  display: flex;
  height: 100vh;
  background: var(--color-background, #f5f5f5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 确保组件正确布局 */
.right-content > * {
  flex-shrink: 0;
}

.right-content > :last-child {
  flex: 1;
}
</style>